import { useState } from 'react'
import { Input, Menu } from 'antd'
import { AppstoreOutlined, MailOutlined } from '@ant-design/icons'

import '@/styles/common.css'
import '@/styles/head-nav/head-nav-overlay-explore-mobile.css'

const { SubMenu } = Menu

/**
 * 这里居然不能使用hook！
 */
const HeadNavOverlayExploreMobile = () => {
  // const [openKeys, setOpenKeys] = useState(['sub1'])
  // const rootSubmenuKeys = ['sub1', 'sub2', 'sub4']

  // const onOpenChange = (openKeys) => {
  //   const latestOpenKey = openKeys.find((key) => openKeys.indexOf(key) === -1)
  //   if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
  //     setOpenKeys(openKeys)
  //   } else {
  //     setOpenKeys(latestOpenKey ? [latestOpenKey] : [])
  //   }
  // }

  return (
    <>
      {/* openKeys={openKeys} */}
      {/* onOpenChange={onOpenChange} */}
      <Menu mode="inline" style={{ width: '100vw' }}>
        <Menu.Item key="sub0">
          <Input
            placeholder="Search"
            style={{
              borderRadius: 8,
              backgroundColor: 'whitesmoke',
              color: 'black',
            }}
          />
        </Menu.Item>
        <SubMenu key="sub1" icon={<MailOutlined />} title="Explore">
          <Menu.Item key="11">Shots</Menu.Item>
          <Menu.Item key="12">Top Designers</Menu.Item>
          <Menu.Item key="13">Blog</Menu.Item>
          <Menu.Item key="14">Playoffs</Menu.Item>
        </SubMenu>
        <SubMenu key="sub2" icon={<AppstoreOutlined />} title="ForDesigners">
          <Menu.Item key="21">Job Board</Menu.Item>
          <Menu.Item key="22">Freelance Projects</Menu.Item>
          <Menu.Item key="23">Go Pro</Menu.Item>
        </SubMenu>
        <SubMenu key="sub3" title="Hiring Designers">
          <Menu.Item key="31">About Dribbble Hiring</Menu.Item>
          <Menu.Item key="32">List my job opening</Menu.Item>
          <Menu.Item key="33">Designer Search</Menu.Item>
          <Menu.Item key="34">Job post + search</Menu.Item>
        </SubMenu>
      </Menu>
    </>
  )
}

// export default HeadNavOverlayExploreMobileClass
export default HeadNavOverlayExploreMobile
